<template>
  <div :class="$style.board">
    <el-dialog v-model="open" fullscreen :before-close="backStorage">
      <div id="index" style="height: 100%; width: 100%" :class="$style.bgColor">
        <div
          style="
            height: 50px;
            width: 120px;
            line-height: 80px;
            position: absolute;
            left: 50px;
            top: 25px;
          "
        >
          <img
            style="
              position: absolute;
              left: 22px;
              top: 10px;
              display: inline-block;
              width: auto;
              height: 30px;
            "
            src="../../../assets/images/favorite3.png"
          />
        </div>
        <div style="height: 80px; text-align: center">
          <h1
            style="
              text-align: center;
              color: red;
              font-size: 30px;
              padding-top: 15px;
            "
          >
            品 质 良 率 看 板
          </h1>
          <div style="color: #ffd700; text-align: center; font-size: 14px">
            当前实时时间:{{ nowTime }} 班次：{{ tmpName }}
          </div>
        </div>
        <div :class="$style.echartAll">
          <div
            :class="$style.echartBorder"
            :key="index"
            v-for="(item, index) in tmpList"
          >
            <div>
              <span style="font-size: 20px; color: #00adff; margin-left: 0px">
                {{ item.blmJtbh }}
              </span>
              <span style="margin-left: 16px; font-size: 16px; color: #00adff"
                >良率:{{ item.lbmRate }}</span
              >
            </div>
            <v-chart
              :options="item.option"
              style="width: 100%; height: 100%"
            ></v-chart>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import BoardService from "@/api/board/board";
export default {
  data() {
    return {
      enlarge: null,
      enlarge1: null,
      enlarge2: null,
      dateTime: "",
      nowTime: null,
      tmpName: null,
      timer2: null,
      modal11: false,
      tmpList: [],
      open: true,
      myChart: [],
      param: null,
      timer: null,
      intver: null,
      chart: null,
    };
  },

  destroyed() {
    clearInterval(this.intver);
    clearInterval(this.timer2);
  },
  mounted() {
    this.getList();
    this.intver = setInterval(() => {
      this.getList();
    }, 10000);
    this.timer2 = setInterval(() => {
      this.nowTime = this.$moment().format();
    }, 1000);
  },

  methods: {
    getList() {
      BoardService.getQualityKanBan().then((res) => {
        this.tmpList = res.list1;
        this.tmpName = res.BcName;
        this.tmpList = res.list1.map((o, i) => {
          if (!o.x[0]) o.x[0] = "";
          o.option = {
            tooltip: {
              show: true,
              trigger: "axis",
            },
            grid: {
              x: 30,
              y: 10,
              x2: 10,
              y2: 30,
            },
            xAxis: {
              type: "category",
              data: o.x,
              axisLabel: {
                interval: 0,
                formatter: function (value) {
                  var ret = ""; //拼接加\n返回的类目项
                  var maxLength = 3; //每项显示文字个数
                  var valLength = value.length; //X轴类目项的文字个数
                  var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                  if (rowN > 1) {
                    //如果类目项的文字大于3,
                    for (var i = 0; i < rowN; i++) {
                      var temp = ""; //每次截取的字符串
                      var start = i * maxLength; //开始截取的位置
                      var end = start + maxLength; //结束截取的位置
                      //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                      temp = value.substring(start, end) + "\n";
                      ret += temp; //凭借最终的字符串
                    }
                    return ret;
                  } else {
                    return value;
                  }
                },
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: "12px",
                },
              },
              axisLine: {
                show: false, //隐藏x轴线
              },
              axisTick: {
                show: false, //隐藏x轴刻度
              },
            },
            yAxis: {
              show: false,
              max: function () {
                let arrNull = [];
                o.y.map((item) => {
                  arrNull.push(item.value);
                });
                let maxNum = Math.max.apply(null, arrNull);
                return maxNum * 1.2;
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
            },
            series: [
              {
                jtbh: o.blmJtbh,
                barWidth: 20,
                data: o.y,
                type: "bar",
                itemStyle: {
                  normal: {
                    color: function (params) {
                      var colorList = [
                        "#C1232B",
                        "#B5C334",
                        "#FCCE10",
                        "#E87C25",
                        "#27727B",

                        "#FE8463",
                        "#9BCA63",
                        "#FAD860",
                        "#F3A43B",
                        "#60C0DD",

                        "#D7504B",
                        "#C6E579",
                        "#F4E001",
                        "#F0805A",
                        "#26C0C0",
                      ];
                      return colorList[params.dataIndex];
                    },
                  },
                  // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  //   { offset: 1, color: '#00adff' },
                  //   { offset: 0.5, color: '#007dfe' },
                  //   { offset: 0, color: '#0054fd' }, // 原本的柱图渐变色
                  // ]),
                },
                label: {
                  show: true,
                  position: "top",
                  top: 0,
                  fontSize: 10,
                  fontWeight: "blod",
                  color: "#fff",
                  offset: [0, -0],
                },
              },
            ],
          };
          return o;
        });
      });
    },
    backStorage() {
      // 返回上级路由并关闭当前路由
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      );
      this.$router.push({ path: "/index" });
    },
  },
};
</script>

<style lang="scss" module>
@use "./board.scss";
.board {
  :global {
    .el-dialog {
      background-image: url("../../../assets/images/bj.jpg");
      background-size: 100% 100%;
    }
  }
}
.echartAll {
  // display: flex;
}
.echartBorder {
  /*border: 1px solid red;*/
  height: 16.5%;
  width: 16.4%;
  float: left;
  background: url("../../../assets/images/wange.png") repeat 50% 50% !important;
  border: 2px solid rgba(92, 255, 255, 0.1);
  background-blend-mode: screen;
  overflow: visible;
}
</style>
